<template>
    <div class="zichan">
        <ziHead :ishead="ishead" @toggleMode="toggleMode"></ziHead>
        <div class="zicontent">
            <div class="zione">
                <div class="zioneleft">
                    <div class="zleftone">
                        <span class="zongtit">总资产估值</span>
                        <img src="@/assets/img/addition/yan.png" alt="" class="yan" v-if="iseye" @click="iseye=!iseye" />
                        <img src="@/assets/img/addition/yans.png" alt="" class="yan" v-if="!iseye" @click="iseye=!iseye" />
                        <div class="zhongbi">充币</div>
                        <div class="zhongbis">提币</div>
                    </div>
                    <span class="znum">{{ !iseye?'0.09':'***' }}<span class="znums">USDT</span></span>
                    <div class="zjia">
                        <span class="jianum">{{ !iseye?'-$185.31(-43.16%)':'******' }}<span class="bannian">半年</span></span>
                        <div class="zhouview">
                            <div class="zhouitem zhactive">1日</div>
                            <div class="zhouitem">1周</div>
                            <div class="zhouitem">1年</div>
                            <div class="zhouitem">半年</div>
                        </div>
                    </div>
                    <div class="kxian">
                        <div ref="main" id="main" style="width:100%;height:100%;"></div>
                    </div>
                </div>
                <div class="zioneright">
                    <div class="zrlist" v-for="(item,index) in 100" :key="index">
                        <img src="@/assets/img/addition/usdt.png" alt="" class="usdt" />
                        <span class="usdtit">USDT</span>
                        <span class="usdnum">28,486.1</span>
                        <img src="@/assets/img/addition/dian.png" alt="" class="dian" />
                    </div>
                </div>
            </div>

            <div class="zitwo">
                <div class="zitwotit">
                    资产动态
                </div>
                <div class="ztlist">
                    <div class="ztitems">
                        <img src="@/assets/img/addition/shangicon.png" alt="" class="shangicon" />
                        <div class="zinav">
                            <span class="zinavtit">提现 USDT</span>
                            <span class="zitime">2023/01/01 11:23:23</span>
                        </div>
                        <span class="rtit">-200 USDT</span>
                    </div>
                    <div class="ztitems">
                        <img src="@/assets/img/addition/shangicon.png" alt="" class="shangicon" />
                        <div class="zinav">
                            <span class="zinavtit">提现 USDT</span>
                            <span class="zitime">2023/01/01 11:23:23</span>
                        </div>
                        <span class="rtit lv">-200 USDT</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref,onMounted } from 'vue';
import Meun from "@/components/menu/meun.vue";
import ziHead from '@/views/property/components/ziHead.vue';
import * as echarts from "echarts";

const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
  () => {
    getecharts()
  }
)

const ishead = ref("0");
const iseye = ref(false);
const getecharts = () =>{
    // console.log("+++++"+main.value)
    // return;
    let myChart = echarts.init(main.value);
    // 指定图表的配置项和数据
    let option = {
        //表头
        title: {
            // text: "ECharts 入门示例"
        },
        grid: {
            top: '10%',//生成的echarts图片和顶部的距离
            bottom: '0%',//echarts图片和底部的距离
            left: '-1%',//echarts图片和左边的距离
            right: '-1%',//echarts图片和右边的间距,
            containLabel: true//当containLabel:为ture时，以上设置生效
        },

        
        xAxis: {
            type: 'category', 
            axisLabel: {//坐标轴刻度标签
                show: true
            },
            axisLine: {//坐标轴轴线
                show: true,
                lineStyle: { // X 轴颜色配置
                color: '#d6d0d0'  
                } 
            },
            axisTick: {//坐标轴刻度
                show: false
            },
            
            // axisLine: {
            //     show: false,
            //     lineStyle: {
            //         color: '#F3BA0D',
            //     }
            // },
            // axisTick:{
            //     show: false
            // },
            data: ['00:30', '05:20', '05:30', '05:40','00:30', '05:20', '05:30', '05:40']
        },
        
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                show: false, // 不显示坐标轴线
            },
            axisLabel: {
                show: false, // 不显示坐标轴上的文字
            },
            axisTick:{
                show: false
            },
        },
        series: [
            {
                data: [698.74, 500, 400, 393,698.74, 500, 400, 393],
                // label: {
                //     show: false,
                //     position: 'top',
                //     fontSize: 12,
                //     color: '#878A8F',
                //     formatter: function(params) {
                //         console.log(params)
                //         return '$'+params.data; // 显示y值
                //         // 或者：return '(' + params.value[0] + ', ' + params.value[1] + ')';
                //         // 显示x和y值
                //     }
                // },
                type: 'line',
                // smooth: true,
                itemStyle: {
                    color: '#D04963', // 数据点颜色
                },
                lineStyle: {color: '#D04963'}
            }
        ]
    };
    myChart.setOption(option);
} 
// getecharts()

// export default {
//     name: "propertyHome",
//     components: { ziHead },
//     data() {
//         return {
//         modal1: false,
//         ishead:0,
//         iseye:false
//         };
//     },
//     mounted() {
//         this.getmain();
//     },
//     setup() {
//     },
//     methods:{
//         toggleMode(e){
//             // console.log(e)
//             this.ishead = e
           
//         },
//         getmain() {
//             //获取echarts对象 
//             let myChart = echarts.init(document.getElementById("main"));
//             // 指定图表的配置项和数据
//             let option = {
//                 //表头
//                 title: {
//                     // text: "ECharts 入门示例"
//                 },
//                 grid: {
//                     top: '10%',//生成的echarts图片和顶部的距离
//                     bottom: '0%',//echarts图片和底部的距离
//                     left: '-1%',//echarts图片和左边的距离
//                     right: '-1%',//echarts图片和右边的间距,
//                     containLabel: true//当containLabel:为ture时，以上设置生效
//                 },

               
//                 xAxis: {
//                     type: 'category', 
//                     axisLabel: {//坐标轴刻度标签
//                         show: true
//                     },
//                     axisLine: {//坐标轴轴线
//                         show: true,
//                         lineStyle: { // X 轴颜色配置
//                         color: '#d6d0d0'  
//                         } 
//                     },
//                     axisTick: {//坐标轴刻度
//                         show: false
//                     },
                    
//                     // axisLine: {
//                     //     show: false,
//                     //     lineStyle: {
//                     //         color: '#F3BA0D',
//                     //     }
//                     // },
//                     // axisTick:{
//                     //     show: false
//                     // },
//                     data: ['00:30', '05:20', '05:30', '05:40','00:30', '05:20', '05:30', '05:40']
//                 },
                
//                 yAxis: {
//                     type: 'value',
//                     splitLine: {
//                         show: false
//                     },
//                     axisLine: {
//                         show: false, // 不显示坐标轴线
//                     },
//                     axisLabel: {
//                         show: false, // 不显示坐标轴上的文字
//                     },
//                     axisTick:{
//                         show: false
//                     },
//                 },
//                 series: [
//                     {
//                         data: [698.74, 500, 400, 393,698.74, 500, 400, 393],
//                         // label: {
//                         //     show: false,
//                         //     position: 'top',
//                         //     fontSize: 12,
//                         //     color: '#878A8F',
//                         //     formatter: function(params) {
//                         //         console.log(params)
//                         //         return '$'+params.data; // 显示y值
//                         //         // 或者：return '(' + params.value[0] + ', ' + params.value[1] + ')';
//                         //         // 显示x和y值
//                         //     }
//                         // },
//                         type: 'line',
//                         // smooth: true,
//                         itemStyle: {
//                             color: '#D04963', // 数据点颜色
//                         },
//                         lineStyle: {color: '#D04963'}
//                     }
//                 ]
//             };
//             myChart.setOption(option);
//             // 使用刚指定的配置项和数据显示图表。
//             //定时器主要实现数据的变化echarts的重新渲染
//             //删除数据第一项 在最后加一项 
//             // setInterval(function () {
//             //     var data0 = option.series[0].data;
//             //     option.series.map(item => {
//             //         item.data.shift();
//             //         item.data.push(Math.round(Math.random() * 39 + 1));
//             //     });
//             //     myChart.setOption(option);
//             // }, 2000);
//         },
//     }
// };
//   const ishead = ref('0');
//   const toggleMode = (e) => {
//     ishead.value = e;
//   };
</script>
  
<style lang="scss" scoped>
.zicontent{
    padding: 20px 20%;
    display: flex;
    flex-direction: column;
    .zione{
        display: flex;
        flex-direction: row;
        .zioneleft{
            border: 1px solid #EEEEEE;
            border-radius: 4px;
            padding:30px  21px;
            // width: 520px;
            width: 66%;
            .zleftone{
                display: flex;
                flex-direction: row;
                align-items: center;
                // width: 100%;
                .zongtit{
                    font-size: 18px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #111111;
                    display: inline-block;
                    margin-right: 10px;
                }
                .yan{
                    width: 19px;
                    height: 12px;
                    cursor: pointer;
                }
                .zhongbi{
                    width: 58px;
                    height: 24px;
                    background: #030000;
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 13px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #FFFFFF;
                    margin-left: auto;
                    margin-right: 16px;
                    cursor: pointer;
                }
                .zhongbis{
                    width: 58px;
                    height: 24px;
                    border: 1px solid #CCCCCC;
                    border-radius: 12px;
                    font-size: 13px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #030000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }
            .znum{
                font-size: 27px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #111111;
                display: block;
                margin: 9px 0 9px;
                .znums{
                    font-size: 19px;
                    font-weight: 400;
                    display: inline-block;
                    margin-left: 5px;
                }
            }
            .zjia{
                display: flex;
                flex-direction: row;
                align-items: center;
                .jianum{
                    font-size: 16px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #D04963;
                }
                .bannian{
                    display: inline-block;
                    color: #8B8B8B;
                    margin-left: 5px;
                }
                .zhouview{
                    margin-left: auto;
                    width: 190px;
                    height: 32px;
                    background: #F0F0F0;
                    border-radius: 4px;
                    padding: 3px;
                    display: flex;
                    flex-direction: row;
                    cursor: pointer;
                    .zhouitem{
                        width: 25%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 11px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #030000;
                    }
                    .zhactive{
                        background: #FFFFFF;
                        border-radius: 4px;
                        font-weight: 400;
                        color: #030000;
                    }
                }
            }
            .kxian{
                height: 200px;
                margin: 30px 0;
            }
        }
        .zioneright{
            width: 32%;
            margin-left: 2%;
            border: 1px solid #EEEEEE;
            border-radius: 4px;
            padding: 18px 12px;
            max-height: 400px;
            overflow-y: scroll;
            .zrlist{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 15px;
                .usdt{
                    width: 20px;
                    height: 20px;
                    margin-right: 4px;
                }
                .usdtit{
                    font-size: 11px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #000000;
                }
                .usdnum{
                    margin-left: auto;
                    margin-right: 60px;
                }
                .dian{
                    width: 11px;
                    height: 3px;
                }
            }
        }
    }

    .zitwo{
        border: 1px solid #EEEEEE;
        border-radius: 3px;
        margin-top: 27px;
        .zitwotit{
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #000000;
            // margin: 15px 0;
            padding: 15px 24px;
            border-bottom: 1px solid #EEEEEE;
        }
        .ztlist{
            padding:0 15px;
            .ztitems{
                display: flex;
                flex-direction: row;
                align-items: center;
                border-bottom: 1px solid #EEEEEE;
                padding: 20px 0;
                .shangicon{
                    width: 35px;
                    height: 35px;
                }
                .zinav{
                    display: flex;
                    flex-direction: column;
                    max-width: 65%;
                    margin-left:11px;
                    .zinavtit{
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #000000;
                    }
                    .zitime{
                        display: inline-block;
                        margin-top: 5px;
                        font-size: 11px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #999999;
                    }
                }
                .rtit{
                    margin-left: auto;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #000000;
                }
                .lv{
                    font-weight: 500;
                    color: #27C27B;
                }
            }
            .ztitems:last-child{
                border-bottom: none;
            }
        }
    }
}
.xiaclass{
    position: relative;
    top: 4px !important;
}
</style>